<template>
    <div>
        <public-title title="预警" :theme-type="themeType">
            <template #right><span class="right-text" :class="[themeType]" @click="viewDetail">查看详情</span> </template>
        </public-title>
        <div class="inner-screen">
            <a-table
                :scroll="{
                    y: tableHeight,
                }"
                style="overflow-y: auto"
                :columns="monitorColumns"
                :dataSource="dataSource"
                :pagination="pagination"
                :rowClassName="
                    (record, index) => (index % 2 === 1 ? 'table-default no-white cursor-pointer' : 'table-striped no-white cursor-pointer')
                "
                class="ant-table-striped three-table"
                :custom-row="customRow"
            >
                <template #address="{ text, record }">
                    <div class="police-times" @click="handlePoliceDetail(record)">
                        <span class="position"></span>
                    </div>
                </template>
            </a-table>
        </div>
        <!--预警查看详情-->
        <EarlyWarningDialog ref="earlyWarningRef"></EarlyWarningDialog>
    </div>
</template>
<script lang="ts" setup>
    import { onUnmounted, ref, watch } from 'vue';
    import PublicTitle from '/@/components/publicTitle.vue';
    import EarlyWarningDialog from '/@/views/components/earlyWarningDialog.vue';
    import { getCustom, getMonitorList } from '/@/components/secondaryScreen/commonApi.ts';
    import { monitorColumns } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
    import $bus from '/@/utils/bus.ts';
    import { earlyWarning } from '/@/utils/busConstant.ts';
    import { useRefresh } from '/@/hooks/autoRefresh';
    import { PAGE_SWITCH } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
    import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';

    const props = defineProps({
        orgCode: String,
        type: String,
        themeType: String,
    });
    const { setSession, getSession } = useSession();
    const { PAGE2_RIGHT3 } = caching;

    const tableHeight = ref(0);
    const dataSource = ref([]);
    const pagination = ref({
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: pageChange,
        showSizeChanger: false,
    });
    const timer = ref(null);
    const pages = ref(0); //总页数

    function handlePoliceDetail(record) {
        $bus.emit(earlyWarning, record);
    }

    watch(
        props,
        () => {
            init(1);
            tableHeight.value == 0 && setHeight();
            window.addEventListener('resize', setHeight);
            timer.value && clearInterval(timer.value);
        },
        { immediate: true, deep: true }
    );

    onUnmounted(() => {
        window.removeEventListener('resize', setHeight);
    });

    function setHeight() {
        let dom = document.querySelector('.inner-screen');
        if (!dom) return;
        tableHeight.value = document.querySelector('.inner-screen').getBoundingClientRect().height - 60;
    }

    async function init(page) {
        try {
            const { pageSize } = pagination.value;
            const { code, result } = await getCustom({ pageSize, pageNo: page, orgCode: props.orgCode });
            if (code == 200) {
                setSession(PAGE2_RIGHT3, JSON.stringify({ page, result }));
                setValue(result, page);
            }
        } catch {
            const { result, page } = getSession(PAGE2_RIGHT3) ? JSON.parse(getSession(PAGE2_RIGHT3)) : {};
            if (result) {
                setValue(result, page);
            }
        }
    }

    function setValue(result, page) {
        dataSource.value = result.records;
        pagination.value.total = result.total;
        pages.value = result.pages;
        pagination.value.current = page;
    }

    function pageChange(page, pageS) {
        pagination.value.current = page;
        pagination.value.pageSize = pageS;
        init(page);
    }

    function interval() {
        let page = pagination.value.current < pages.value ? pagination.value.current + 1 : 1;
        init(page);
    }

    const { refreshState } = useRefresh(PAGE_SWITCH, () => {
        // interval();
    });

    function customRow(record = {}) {
        return {
            onClick: () => {
                handlePoliceDetail(record);
            },
        };
    }

    const earlyWarningRef = ref(null);

    /**
     * 查看详情
     */
    function viewDetail() {
        earlyWarningRef.value && earlyWarningRef.value.openDialog();
    }

    onUnmounted(() => {
        clearInterval(timer.value);
    });
</script>
<style lang="less" scoped>
    .right-text {
        font-weight: 100;
        cursor: pointer;
        margin-right: 3px;
        font-size: 18px;
    }

    .inner-screen {
        width: 100%;
        height: calc(100% - 40px);
        margin: 20px 0;

        .cursor-pointer {
            cursor: pointer;
        }

        .police-times {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer !important;

            .position {
                margin-left: 5px;
                display: inline-block;
                width: 18px;
                height: 18px;
                background: url('/@/assets/img/position.png') no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }
        }

        :deep(.ant-table-thead) {
            display: none !important;
        }

        :deep(.ant-table) {
            background-color: transparent;
        }

        :deep(.ant-table-tbody > tr > td) {
            border-bottom: none;
            padding: 6px 4px;
            cursor: pointer;
        }

        :deep(.ant-table-tbody > tr.ant-table-placeholder:hover > td) {
            background-color: transparent !important;
        }

        :deep(.ant-table-row:hover) {
            background-color: transparent;
            color: #ffffff;
        }
    }

    :deep(.ant-table-tbody > .no-white > td) {
        background-color: blue;
    }

    .no-white,
    .no-white:hover > td {
        background-color: blue;
    }

    //奇行
    .ant-table-striped :deep(.table-striped) td {
        background-color: #0a0a0c;
        color: #ffffff;
    }

    //偶行
    .ant-table-striped :deep(.table-default) td {
        color: #ffffff;
        background: none !important;
    }

    //奇行-hover
    :deep(.ant-table-tbody > tr.ant-table-row.table-striped:hover > td, .ant-table-tbody > tr > td.table-striped) {
        background-color: #0a0a0c !important;
        color: #ffffff;
    }

    //偶行-hover
    :deep(.ant-table-tbody > tr.ant-table-row.table-default:hover > td, .ant-table-tbody > tr > td.table-default) {
        color: #ffffff;
        background: none !important;
    }

    // 分页
    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
        background-color: #1f2935;
        color: #8291a9;
        border: none;
    }

    :deep(.ant-pagination-item) {
        background-color: #1f2935;
        color: #ffffff;
        border: none;
    }

    // 当前页选中的样式
    :deep(.ant-pagination-item-active) {
        background-color: #0081ff;
    }

    :deep(.ant-pagination-item-active a) {
        color: #ffffff;
    }

    :deep(.ant-pagination-item a) {
        color: #ffffff;
    }

    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
        color: #ffffff;
        background-color: #1f2935;
    }

    // 省略样式
    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
        color: #ffffff;
    }

    // 省略鼠标移入样式
    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
        color: rgba(255, 255, 255, 0.4);
    }

    // 下一页
    :deep(.ant-pagination-next .ant-pagination-item-link) {
        background-color: #1f2935;
        color: #8291a9;
        border: none;
    }
</style>
